<template>
  <div class="comment_container">
    <h3>发表评论</h3>
    <hr>
    <textarea maxlength="120" placeholder="请输入要BB的内容,最多BB120个字" v-model="comment"></textarea>
    <mt-button type="primary" size="large" @click="submitcomment">发表评论</mt-button>
    <!-- 下面是展示评论列表的区域 -->
    <ul class="comment_list">
      <li class="comment_item" v-for="(comment, i) in commentlist" :key="comment.add_time">
        <div class="comment_title">
          第{{ i+1 }}楼&nbsp;&nbsp;用户名：{{ comment.user_name }}&nbsp;&nbsp;发表时间：
          {{ comment.add_time|dateFormat}}
        </div>
        <div class="comment_body">{{ comment.content }}</div>
      </li>
    </ul>
    <mt-button type="danger" size="large" plain @click="getmorecomments">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import qs from "qs";
export default {
  created() {
    this.getcomments();
    // console.log(this.getCookie("csrftoken"));  // 永远是null
  },
  data() {
    return {
      pageindex: 1, // 默认展示第一页的评论
      commentlist: [], // 展示的评论列表
      comment: "" // 评论框双向绑定的值
    };
  },
  props: ["obj_id"],
  methods: {
    // 获取评论数据的方法
    getcomments() {
      this.$http
        .get(
          "api/getcomments/" + this.obj_id + "?pageindex=" + this.pageindex,
          // 调用接口时传递一个参数,用于后台从哪个表获取对象的评论
          {
            classes: this.classes
          }
        )
        .then(result => {
          if (result.data.status === 0) {
            this.commentlist = this.commentlist.concat(result.data.message);
          } else if (result.data.status === 1) {
            Toast("已经没有更多内容了");
            this.pageindex--;
          } else {
            Toast("获取评论列表失败");
          }
        });
    },
    getmorecomments() {
      this.pageindex++;
      this.getcomments();
    },
    // 发表评论函数
    submitcomment() {
      // 1.判断评论内容是否为空
      if (this.comment.trim().length === 0) {
        return Toast("评论内容不能为空!");
      }
      // 先发送get请求获取cookie
      this.$http.get("gettoken/").then(result => {
        // console.log("发送了get请求")
        this.postcomment(result.data.token);
      });
    },
    postcomment(csrftoken) {
      var userid = 4;
      // 3.使用axios发送post请求
      this.$http
        .post(
          "api/postcomment/" + this.obj_id + "/",
          qs.stringify({
            userid: userid,
            comment: this.comment
          }),
          {
            headers: { "X-CSRFToken": csrftoken }
          }
        )
        .then(result => {
          // 提交成功后,后台返回评论成功的对象,接收这个对象并添加到评论列表的头部
          if (result.data.status === 0) {
            this.commentlist.unshift(result.data.commentobj);
          } else {
            Toast("发表评论失败");
          }
          // 清空评论框的内容
          this.comment = "";
        });
    },
    getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }
  }
};
</script>
<style lang="scss" scoped>
.comment_container {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 85px;
    margin: 0;
  }
  .comment_list {
    margin: 5px 0;
    padding: 0;
    .comment_item {
      list-style: none;
      font-size: 13px;
      .comment_title {
        background-color: #ccc;
        line-height: 30px;
      }
      .comment_body {
        line-height: 40px;
        text-indent: 2em;
      }
    }
  }
}
</style>
